<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>我的优惠券</title>
		<link rel="stylesheet" href="/Public/Home/css/common.css">
		<link rel="stylesheet" href="/Public/Home/css/main.css">
		<script src="/Public/Home/js/zepto.js"></script>
		<script src="/Public/Home/js/iscroll-probe.js"></script>
		<script src="/Public/Home/js/delIOS_huitan.js"></script>
		<style>
			/*下拉加载样式*/
			#wrapper {
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				overflow: hidden; 
			}
			#loadBin{color: #5d5d5d;text-align: center;line-height: 30px;}
		</style>
	</head>
	<body onLoad="onload()" class="box">
		<!--提示文字-->
		<div class="tip" style="opacity: 0;z-index: -1"></div>
		<!-- 遮罩 -->
		<div id="zhezhao" style="display:none"></div>
		<!-- 弹出框 -->
		<div class="quanKuang" style="display:none">
			<p class="tit">添加优惠券</p>
			<div class="con">
				优惠券序列号: <input type="text" class="sn" placeholder="请输入优惠券序列号">
			</div>
			<div class="bot">
				<span class="sure" id="addCoupon">确认</span>
				<span class="cancel">取消</span>
			</div>
		</div>
		<!--正文区域-->
		<div id="dingdanUseQuanTop" class="top1top2">
			<div class="contain maxWidth">
				<div class="top1">
					<a class="hz back" href="<?php echo U('/Member/Index/index');?>">&#xe600;</a>我的优惠券
					<a href="/index.php?s=/Member/Index/allcouponlist" class="lor">领取</a>
					<!-- <a href="javascript:;" class="lor">添加</a> -->
				</div>
				<div class="top2">
					<ul class="clear">
						<li <?php if($type == 0): ?>class="active"<?php endif; ?>><a href="/index.php?s=/Member/Index/couponlist">未过期</a></li>
						<li <?php if($type == 1): ?>class="active"<?php endif; ?>><a href="/index.php?s=/Member/Index/couponlist/type/1">已过期</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="dingdanUseQuanMain" class="fastscroll top100bot0">
			<div class="contain maxWidth">
				<div id="wrapper">
					<div class="maxWidth">
						<!--未过期 已过期 公用一个ul-->
						<ul class="list quancom">
						<?php if($list != null): if(is_array($list)): $i = 0; $__LIST__ = $list;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$item): $mod = ($i % 2 );++$i;?><li>
								<a href="javascript:;">
									<div class="left">
										<p class="title"><?php echo ($item["title"]); ?></p>
										<p class="info">使用期限 <span class="starttime"><?php echo ($item["start_date"]); ?></span>-<span class="endtime"><?php echo ($item["end_date"]); ?></span></p>
									</div>
									<div class="right">
										<!-- 这块的类名是 area10 area20 area40 循环出现 三个是三种不同的颜色-->
										<div class="area area10">
											<span class="leftcircle circle"></span>
											<span class="rightcircle circle"></span>
											<p class="title">&yen;<span><?php echo ($item["money"]); ?></span></p>
											<p class="info"><?php echo ($item["desc"]); ?></p>
										</div>
									</div>
								</a>
							</li><?php endforeach; endif; else: echo "" ;endif; ?>
						<?php else: ?>
						<div style="width: 100%;height: 100px;color: gray;text-align: center;margin-top: 100px;">暂无优惠券！！</div><?php endif; ?>
						</ul>
						<div id="loadBin"></div>
					</div>
				</div>
			</div>
		</div>

		<script>
			//返回按钮
			/*$('#dingdanUseQuanTop .back').on('tap',function(){
				// window.history.go(-1);
				location.href='/Member';
			});*/

			//点击添加
			/*$('.top1top2 .lor').on('tap',function(){
				$('.quanKuang .con input').val('');
				$('.quanKuang').css('display','block');
				$('#zhezhao').css('display','block');
			});*/
			//点击取消
			$('.quanKuang .bot .cancel').on('tap',function(){
				$('.quanKuang').css('display','none');
				$('#zhezhao').css('display','none');
			});
			//点击确定
			$('.quanKuang .bot .sure').on('tap',function(){
				$('.quanKuang').css('display','none');
				$('#zhezhao').css('display','none');

				//输入的值 传入后台
				var v=$('.quanKuang .con input').val();
				$.ajax({
					url: '<?php echo U('addcouponlist');?>',
					type: 'POST',
					dataType: 'json',
					data: {sn:v},
					success:function(data){
						tipFun(data['msg']);
					}
				})
			});

			//iscroll 下拉加载+zeptoajax
			function onload(){
				loadBin = document.getElementById("loadBin");
				myScroll = new IScroll('#wrapper',{
					probeType: 3,
					click:true
				});
				myScroll.on("scroll",scrollFun);
				myScroll.on("scrollEnd",scrollEndFun);
			}

			var page=1;
			var myScroll,
					loadBin,
					isload = false,
					scrollFun = function(){
						if((this.y - this.maxScrollY)>>0 < -50){
							isload = true;
							loadBin.innerHTML = "松开手指加载更多";
							myScroll.refresh();
							myScroll.off("scroll",scrollFun);
						}
					},
					scrollEndFun = function(){
						if(isload){
							isload = false;
							//我的优惠券未过期
							if(currIndex==0){
								$.ajax({
									type: 'GET',
									url: 'data/我的优惠券未过期.html',
									dataType: 'json',
									success: function(data){
										page++;
										for(var i=0;i<data.lists.length;i++){
											$('#wrapper .list').append('<li><a href="javascript:;"><div class="left"><p class="title">'+data.lists[i].title+'</p><p class="info">使用期限<span class="starttime">'+data.lists[i].starttime+'</span>-<span class="endtime">'+data.lists[i].endtime+'</span></p></div><div class="right"><div class="area '+data.lists[i].class+'"><span class="leftcircle circle"></span><span class="rightcircle circle"></span><p class="title">&yen;<span>'+data.lists[i].quanMoney+'</span></p><p class="info">满&yen;<span>'+data.lists[i].manMoney+'</span>使用</p></div></div></a></li>');
										}
										loadBin.innerHTML = "";
										myScroll.on("scroll",scrollFun);
										myScroll.refresh();
									},
									error: function(xhr, type){
										console.log('Ajax error!');
									}
								});
							}else if(currIndex==1){
								//我的优惠券已过期
								$.ajax({
									type: 'GET',
									url: 'data/我的优惠券已过期.html',
									dataType: 'json',
									success: function(data){
										page++;
										for(var i=0;i<data.lists.length;i++){
											$('#wrapper .list').append('<li><a href="javascript:;"><div class="left"><p class="title">'+data.lists[i].title+'</p><p class="info">使用期限<span class="starttime">'+data.lists[i].starttime+'</span>-<span class="endtime">'+data.lists[i].endtime+'</span></p></div><div class="right"><div class="area '+data.lists[i].class+'"><span class="leftcircle circle"></span><span class="rightcircle circle"></span><p class="title">&yen;<span>'+data.lists[i].quanMoney+'</span></p><p class="info">满&yen;<span>'+data.lists[i].manMoney+'</span>使用</p></div></div></a></li>');
										}
										loadBin.innerHTML = "";
										myScroll.on("scroll",scrollFun);
										myScroll.refresh();
									},
									error: function(xhr, type){
										console.log('Ajax error!');
									}
								});
							}
						}
					};


			var currIndex=0;//默认是在第一个tab上
			//点击nav 切换标签
			$('#dingdanUseQuanTop .top2 li').on('tap',function(){
				currIndex=$(this).index();
				$(this).addClass('active').siblings().removeClass('active');

				$('#wrapper .list').html('');//清空内容

				//切换tab的时候，让滚动条在顶部
				myScroll._translate(0,0);//查看源码，里面提供方法

				page=1;
				if(currIndex==0){
					//我的优惠券未过期
					//样子变成彩色的
					$('#dingdanUseQuanMain .yi').removeClass('yi');

					$.ajax({
						type: 'GET',
						url: 'data/我的优惠券未过期.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								$('#wrapper .list').append('<li><a href="javascript:;"><div class="left"><p class="title">'+data.lists[i].title+'</p><p class="info">使用期限<span class="starttime">'+data.lists[i].starttime+'</span>-<span class="endtime">'+data.lists[i].endtime+'</span></p></div><div class="right"><div class="area '+data.lists[i].class+'"><span class="leftcircle circle"></span><span class="rightcircle circle"></span><p class="title">&yen;<span>'+data.lists[i].quanMoney+'</span></p><p class="info">满&yen;<span>'+data.lists[i].manMoney+'</span>使用</p></div></div></a></li>');
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}else if(currIndex==1){
					//我的优惠券已过期
					//样子变成灰色的
					$('#dingdanUseQuanMain .quancom').addClass('yi');

					$.ajax({
						type: 'GET',
						url: 'data/我的优惠券已过期.html',
						dataType: 'json',
						success: function(data){
							page++;
							for(var i=0;i<data.lists.length;i++){
								$('#wrapper .list').append('<li><a href="javascript:;"><div class="left"><p class="title">'+data.lists[i].title+'</p><p class="info">使用期限<span class="starttime">'+data.lists[i].starttime+'</span>-<span class="endtime">'+data.lists[i].endtime+'</span></p></div><div class="right"><div class="area '+data.lists[i].class+'"><span class="leftcircle circle"></span><span class="rightcircle circle"></span><p class="title">&yen;<span>'+data.lists[i].quanMoney+'</span></p><p class="info">满&yen;<span>'+data.lists[i].manMoney+'</span>使用</p></div></div></a></li>');
							}
							myScroll.refresh();
						},
						error: function(xhr, type){
							console.log('Ajax error!');
						}
					});
				}
			});

			//tip
			function tipFun(str){
				$('.tip').text(str).css({
					'opacity':'1',
					'z-index':'9999'
				});
				setTimeout(function(){
					$('.tip').css('opacity','0');
					setTimeout(function(){
						$('.tip').css('z-index','-1');
					},300);
				},1300);
			}
		</script>

	</body>
</html>